<template>
    <Tabbar />
    <view class=" absolute w-full h-[80vh] flex flex-col  items-center  mt-15">
        <Back :title="optionsObj.title" />
        <view class="w-full h-[80vh] grid grid-cols-7 flex flex-row pb-7 mt-5 justify-start items-start">
            <swiper class="w-full h-[80vh] col-span-5" :display-multiple-items="1" :autoplay="false" :circular="false"
                :indicator-dots="false" indicator-color="#fff" indicator-active-color="#2196F3" @change="changeSwiper">
                <swiper-item v-for="(listItem, listIndex) in filterData.swiperData" :key="listIndex">
                    <view class="flex flex-row justify-center items-center">
                        <view class="w-full h-[72vh] flex flex-col justify-center items-center bg-white"
                            style="background: rgba(255, 255, 255, 0);">
                            <image :src="listItem.image" mode="aspectFit" class="w-full h-full" />
                        </view>
                    </view>
                </swiper-item>
                <swiper-item v-if="filterData.video">
                    <view class="w-full h-[67vh]" style="background-color: #000;" @tap="doPlaying()">
                        <view class="w-full h-[57vh] absolute top-0 left-0 flex justify-center items-center z-10"
                            style="background: rgba(255, 255, 255, 0);">
                        </view>
                        <image :src="filterData.videoPoster" mode="scaleToFill"
                            class="w-full h-[67vh] absolute top-0 left-0 flex justify-center items-center z-10"
                            v-show="showPoster" />
                        <view
                            class="text-white font-bold text-lg absolute bottom-220 left-[43%] flex justify-center items-center text-center  z-10 w-[200rpx] h-[100rpx]  bg-[#7B7D81] opacity-80 rounded-full"
                            v-show="noShowButton">点击播放</view>
                        <DomVideoPlayer ref="domVideoPlayer" :src="filterData.video" :controls="true"
                            :enable-progress-gesture="false" class="w-full h-auto">
                        </DomVideoPlayer>
                    </view>
                </swiper-item>
            </swiper>
            <view class="w-full h-[80vh] col-span-2 flex flex-col justify-start items-center pr-3 pl-3">
                <view class="px-4 flex justify-center text-center">
                    <view class="h-[60rpx] w-[450rpx] flex flex-row justify-between items-center border-0  pb-2">
                        <template v-for="(item, index) in list" :key="index">
                            <view class="h-[60rpx] text-18px font-semibold border-0 bg-transparent pt-0"
                                :class="current === index ? 'bg-transparent text-blue' : ''"
                                :style="current === index ? 'color: #449df8; border-bottom: 2px solid #449df8; border-radius: 0px;' : ''"
                                @click="changeIndex(index)">
                                {{ item.name }}
                            </view>
                        </template>
                    </view>
                </view>
                <view class="w-full h-[67vh] overflow-y-auto">
                    <view class="w-full h-full flex flex-col justify-start items-start">
                        <view class="mt-2 text-30rpx text-black leading-6">
                            <text v-for="(item, index) in description" :key="index">
                                {{ `${index + 1}.${item}` }}<br />
                            </text>
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <q-previewImage ref="previewImage" :urls="imageList"></q-previewImage>
    </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { onShow, onHide, onLoad } from '@dcloudio/uni-app'
import Tabbar from '@/components/Tabbar/tabbar.vue'
import Back from '@/components/Back/Back.vue'
import DomVideoPlayer from '@/components/DomVideoPlayer/DomVideoPlayer.vue'
import Swiper from '@/components/Swiper/index.vue'
import { productsData } from './data'

const current = ref(0)
const description = ref(new Array())
function changeIndex(e: any) {
    current.value = e
    if (e === 0) {
        description.value = filterData.value.cn
    } else {
        description.value = filterData.value.en
    }
}
const list = [
    { name: '设备', },
    { name: 'Equipment features', },
]

const filterData = ref()
const imageList = ref()
async function filterArray() {
    if (!optionsObj.value.type) {
        return new Array()
    }
    let list: any = productsData.productsProfile.filter(item => item.type === optionsObj.value.type)[0]
    imageList.value = list.swiperData.map((item: any) => item.image)
    filterData.value = list
}

const previewImage = ref<any>(null)
const preview = (url: any) => {
    previewImage.value.open(url); // 传入当前选中的图片地址
};

const domVideoPlayer = ref<any>(null)
const noShowButton = ref(true)
const showPoster = ref(1)
const doPlaying = () => {
    showPoster.value = 0
    if (domVideoPlayer.value.playing) {
        doPause()
    } else {
        doPlay()
    }
}
const doPlay = () => {
    domVideoPlayer.value.play()
    noShowButton.value = false
}

const doPause = () => {
    domVideoPlayer.value.pause()
    noShowButton.value = true
}

const changeSwiper = (e: any) => {
    doPause()
}

const optionsObj = ref<any>({})
onLoad((options) => {
    if (options) {
        optionsObj.value = options
    }
})

onShow(() => {
    filterArray()
    description.value = filterData.value.cn
})

onHide(() => {
    showPoster.value = 1
    noShowButton.value = true
})



onMounted(() => {
})
</script>

<style scoped>
.box-shadow {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1)
}

:deep(button::after) {
    border: 0 !important;
    box-shadow: none !important;
}

/* :deep(button) {
    border: none !important;
    box-shadow: none !important;
} */

:deep(.uni-button),
:deep(.uni-button::after) {
    border: 0 !important;
    box-shadow: none !important;
}
</style>
